React createPortal: Het Beheersen van Portalcreatie en Event Handling

In moderne webontwikkeling met React is het cruciaal om gebruikersinterfaces te creëren die naadloos integreren met de onderliggende documentstructuur. Hoewel het componentmodel van React uitblinkt in het beheren van de virtuele DOM, moeten we soms elementen renderen buiten de normale componentenhiërarchie. Dit is waar createPortal van pas komt. Deze gids verkent createPortal diepgaand en behandelt het doel, het gebruik en geavanceerde technieken voor het afhandelen van events en het bouwen van complexe UI-elementen. We zullen ook ingaan op overwegingen voor internationalisering, best practices voor toegankelijkheid en veelvoorkomende valkuilen die vermeden moeten worden.

Wat is React createPortal?

createPortal is een React API waarmee je de children van een React-component kunt renderen in een ander deel van de DOM-tree, buiten de hiërarchie van de parent-component. Dit is met name handig voor het maken van elementen zoals modals, tooltips, dropdowns en overlays die op het hoogste niveau van het document of binnen een specifieke container moeten worden gepositioneerd, ongeacht waar de component die ze activeert zich in de React-componenten-tree bevindt.

Zonder createPortal vereist dit vaak complexe workarounds, zoals het direct manipuleren van de DOM of het gebruik van CSS absolute positionering, wat kan leiden tot problemen met stapelingscontexten (stacking contexts), z-index-conflicten en toegankelijkheid.

Waarom createPortal gebruiken?

Hier zijn de belangrijkste redenen waarom createPortal een waardevol hulpmiddel is in je React-arsenaal:

• Verbeterde DOM-structuur: Voorkomt het diep nesten van componenten in de DOM, wat leidt tot een schonere en beter beheersbare structuur. Dit is vooral belangrijk voor complexe applicaties met veel interactieve elementen.
• Vereenvoudigde Styling: Positioneer elementen eenvoudig ten opzichte van de viewport of specifieke containers zonder afhankelijk te zijn van complexe CSS-trucs. Dit vereenvoudigt styling en layout, vooral bij elementen die over andere inhoud heen moeten liggen.
• Verbeterde Toegankelijkheid: Vergemakkelijkt het creëren van toegankelijke UI's door je in staat te stellen focus en toetsenbordnavigatie onafhankelijk van de componentenhiërarchie te beheren. Bijvoorbeeld, ervoor zorgen dat de focus binnen een modal-venster blijft.
• Betere Event Handling: Zorgt ervoor dat events correct vanuit de inhoud van de portal naar de React-tree propageren, waardoor event listeners die aan parent-componenten zijn gekoppeld, nog steeds werken zoals verwacht.

Basisgebruik van createPortal

De createPortal API accepteert twee argumenten:

1. De React-node (JSX) die je wilt renderen.
2. Het DOM-element waar je de node wilt renderen. Dit DOM-element moet idealiter al bestaan voordat de component die createPortal gebruikt, mount.

Hier is een eenvoudig voorbeeld:

Voorbeeld: Een Modal Renderen

Stel, je hebt een modal-component die je aan het einde van het body-element wilt renderen.

            import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root'); // Gaat ervan uit dat je een 
 in je HTML hebt

  if (!modalRoot) {
    console.error('Modal root element not found!');
    return null;
  }

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default Modal;

            

              
                Copy
              
            
          

Uitleg:

• We importeren ReactDOM omdat createPortal een methode is van het ReactDOM-object.
• We gaan ervan uit dat er een DOM-element met de ID modal-root in je HTML staat. Dit is waar de modal zal worden gerenderd. Zorg ervoor dat dit element bestaat. Een gebruikelijke praktijk is om een <div id="modal-root"></div> toe te voegen net voor de sluitende </body>-tag in je index.html-bestand.
• We gebruiken ReactDOM.createPortal om de JSX van de modal te renderen in het modalRoot-element.
• We gebruiken e.stopPropagation() om te voorkomen dat het onClick-event op de inhoud van de modal de onClose-handler op de overlay activeert. Dit zorgt ervoor dat klikken binnen de modal deze niet sluit.

Gebruik:

            import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <button onClick={() => setIsModalOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Dit voorbeeld laat zien hoe je een modal buiten de normale componentenhiërarchie kunt renderen, waardoor je deze absoluut op de pagina kunt positioneren. Het gebruik van createPortal op deze manier lost veelvoorkomende problemen met stapelingscontexten op en stelt je in staat om eenvoudig een consistente styling voor modals in je hele applicatie te creëren.

Event Handling met createPortal

Een van de belangrijkste voordelen van createPortal is dat het het normale event-bubbling-gedrag van React behoudt. Dit betekent dat events die binnen de inhoud van de portal ontstaan, nog steeds omhoog zullen propageren in de React-componenten-tree, waardoor parent-componenten ze kunnen afhandelen.

Het is echter belangrijk te begrijpen hoe events worden afgehandeld wanneer ze de grens van de portal overschrijden.

Voorbeeld: Events Buiten de Portal Afhandelen

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function OutsideClickExample() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const portalRoot = document.getElementById('portal-root');

  useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [dropdownRef]);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && portalRoot && ReactDOM.createPortal(
        <div ref={dropdownRef} style={{ position: 'absolute', top: '50px', left: '0', border: '1px solid black', padding: '10px', backgroundColor: 'white' }}>
          Dropdown Content
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default OutsideClickExample;

            

              
                Copy
              
            
          

Uitleg:

• We gebruiken een ref om toegang te krijgen tot het dropdown-element dat binnen de portal wordt gerenderd.
• We koppelen een mousedown event listener aan het document om klikken buiten de dropdown te detecteren.
• Binnen de event listener controleren we of de klik buiten de dropdown plaatsvond met behulp van dropdownRef.current.contains(event.target).
• Als de klik buiten de dropdown plaatsvond, sluiten we deze door isOpen op false te zetten.

Dit voorbeeld laat zien hoe je events kunt afhandelen die buiten de inhoud van de portal plaatsvinden, waardoor je interactieve elementen kunt creëren die reageren op gebruikersacties in het omliggende document.

Geavanceerde Gebruiksscenario's

createPortal is niet beperkt tot eenvoudige modals en tooltips. Het kan in diverse geavanceerde scenario's worden gebruikt, waaronder:

• Contextmenu's: Render dynamisch contextmenu's in de buurt van de muiscursor bij een rechtermuisklik.
• Notificaties: Toon notificaties bovenaan het scherm, ongeacht de componentenhiërarchie.
• Aangepaste Popovers: Creëer aangepaste popover-componenten met geavanceerde positionering en styling.
• Integratie met Bibliotheken van Derden: Gebruik createPortal om React-componenten te integreren met bibliotheken van derden die specifieke DOM-structuren vereisen.

Voorbeeld: Een Contextmenu Maken

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function ContextMenuExample() {
  const [contextMenu, setContextMenu] = useState(null);
  const menuRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setContextMenu(null);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [menuRef]);

  const handleContextMenu = (event) => {
    event.preventDefault();
    setContextMenu({
      x: event.clientX,
      y: event.clientY,
    });
  };

  const portalRoot = document.getElementById('portal-root');

  return (
    <div onContextMenu={handleContextMenu} style={{ border: '1px solid black', padding: '20px' }}>
      Right-click here to open context menu
      {contextMenu && portalRoot && ReactDOM.createPortal(
        <div
          ref={menuRef}
          style={{
            position: 'absolute',
            top: contextMenu.y,
            left: contextMenu.x,
            border: '1px solid black',
            padding: '10px',
            backgroundColor: 'white',
          }}
        >
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default ContextMenuExample;

            

              
                Copy
              
            
          

Uitleg:

• We gebruiken het onContextMenu-event om rechtermuisklikken op het doelelement te detecteren.
• We voorkomen dat het standaard contextmenu verschijnt met event.preventDefault().
• We slaan de muiscoördinaten op in de contextMenu state-variabele.
• We renderen het contextmenu binnen een portal, gepositioneerd op de muiscoördinaten.
• We gebruiken dezelfde logica voor het detecteren van klikken buiten het menu als in het vorige voorbeeld om het contextmenu te sluiten wanneer de gebruiker erbuiten klikt.

Overwegingen voor Toegankelijkheid

Bij het gebruik van createPortal is het cruciaal om rekening te houden met toegankelijkheid om ervoor te zorgen dat je applicatie voor iedereen bruikbaar is.

Focus Management

Wanneer een portal opent (bijv. een modal), moet je ervoor zorgen dat de focus automatisch wordt verplaatst naar het eerste interactieve element binnen de portal. Dit helpt gebruikers die navigeren met een toetsenbord of schermlezer om gemakkelijk toegang te krijgen tot de inhoud van de portal.

Wanneer de portal sluit, moet je de focus terugbrengen naar het element dat de opening van de portal activeerde. Dit handhaaft een consistente navigatiestroom.

ARIA-attributen

Gebruik ARIA-attributen om semantische informatie te verschaffen over de inhoud van de portal. Gebruik bijvoorbeeld aria-modal="true" op het modal-element om aan te geven dat het een modaal dialoogvenster is. Gebruik aria-labelledby om de modal te koppelen aan zijn titel, en aria-describedby om het te koppelen aan zijn beschrijving.

Toetsenbordnavigatie

Zorg ervoor dat gebruikers door de inhoud van de portal kunnen navigeren met het toetsenbord. Gebruik het tabindex-attribuut om de focusvolgorde te bepalen en zorg ervoor dat alle interactieve elementen bereikbaar zijn met het toetsenbord.

Overweeg de focus binnen de portal "gevangen te houden" (focus trapping), zodat gebruikers niet per ongeluk erbuiten kunnen navigeren. Dit kan worden bereikt door te luisteren naar de Tab-toets en de focus programmatisch te verplaatsen naar het eerste of laatste interactieve element binnen de portal.

Voorbeeld: Toegankelijke Modal

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function AccessibleModal({ children, isOpen, onClose, labelledBy, describedBy }) {
  const modalRef = useRef(null);
  const firstFocusableElementRef = useRef(null);
  const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
  const modalRoot = document.getElementById('modal-root');

  useEffect(() => {
    if (isOpen) {
      // Sla het huidig gefocuste element op voordat de modal opent.
      setPreviouslyFocusedElement(document.activeElement);

      // Focus het eerste focusbare element in de modal.
      if (firstFocusableElementRef.current) {
        firstFocusableElementRef.current.focus();
      }

      // Houd de focus gevangen binnen de modal.
      function handleKeyDown(event) {
        if (event.key === 'Tab') {
          const focusableElements = modalRef.current.querySelectorAll(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          const firstFocusableElement = focusableElements[0];
          const lastFocusableElement = focusableElements[focusableElements.length - 1];

          if (event.shiftKey) {
            // Shift + Tab
            if (document.activeElement === firstFocusableElement) {
              lastFocusableElement.focus();
              event.preventDefault();
            }
          } else {
            // Tab
            if (document.activeElement === lastFocusableElement) {
              firstFocusableElement.focus();
              event.preventDefault();
            }
          }
        }
      }

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        // Herstel de focus naar het element dat de focus had voordat de modal opende.
        if(previouslyFocusedElement && previouslyFocusedElement.focus) {
          previouslyFocusedElement.focus();
        }
      };
    }
  }, [isOpen, previouslyFocusedElement]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div
      className="modal-overlay"
      onClick={onClose}
      aria-modal="true"
      aria-labelledby={labelledBy}
      aria-describedby={describedBy}
      ref={modalRef}
    >
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2 id={labelledBy}>Modal Title</h2>
        <p id={describedBy}>This is the modal content.</p>
        <button ref={firstFocusableElementRef} onClick={onClose}>
          Close
        </button>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default AccessibleModal;

            

              
                Copy
              
            
          

Uitleg:

• We gebruiken ARIA-attributen zoals aria-modal, aria-labelledby en aria-describedby om semantische informatie over de modal te verschaffen.
• We gebruiken de useEffect-hook om de focus te beheren wanneer de modal opent en sluit.
• We slaan het huidig gefocuste element op voordat de modal opent en herstellen de focus daarop wanneer de modal sluit.
• We houden de focus gevangen binnen de modal met een keydown event listener.

Overwegingen voor Internationalisering (i18n)

Bij het ontwikkelen van applicaties voor een wereldwijd publiek is internationalisering (i18n) een cruciale overweging. Bij het gebruik van createPortal zijn er een paar punten om in gedachten te houden:

• Tekstrichting (RTL/LTR): Zorg ervoor dat je styling geschikt is voor zowel links-naar-rechts (LTR) als rechts-naar-links (RTL) talen. Dit kan inhouden dat je logische eigenschappen in CSS gebruikt (bijv. margin-inline-start in plaats van margin-left) en het dir-attribuut correct instelt op het HTML-element.
• Lokalisatie van Inhoud: Alle tekst binnen de portal moet gelokaliseerd worden naar de voorkeurstaal van de gebruiker. Gebruik een i18n-bibliotheek (bijv. react-intl, i18next) om vertalingen te beheren.
• Opmaak van Getallen en Datums: Formatteer getallen en datums volgens de locale van de gebruiker. De Intl API biedt hiervoor functionaliteiten.
• Culturele Conventies: Wees je bewust van culturele conventies met betrekking tot UI-elementen. De plaatsing van knoppen kan bijvoorbeeld per cultuur verschillen.

Voorbeeld: i18n met react-intl

            import React from 'react';
import { FormattedMessage } from 'react-intl';

function MyComponent() {
  return (
    <div>
      <FormattedMessage id="myComponent.greeting" defaultMessage="Hello, world!" />
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

De FormattedMessage-component van react-intl haalt de vertaalde boodschap op op basis van de locale van de gebruiker. Configureer react-intl met je vertalingen voor verschillende talen.

Veelvoorkomende Valkuilen en Oplossingen

Hoewel createPortal een krachtig hulpmiddel is, is het belangrijk om je bewust te zijn van enkele veelvoorkomende valkuilen en hoe je ze kunt vermijden:

• Ontbrekend Portal Root-element: Zorg ervoor dat het DOM-element dat je als portal root gebruikt, al bestaat voordat de component die createPortal gebruikt, mount. Een goede praktijk is om het direct in de index.html te plaatsen.
• Z-index-conflicten: Wees bedacht op z-index-waarden bij het positioneren van elementen met createPortal. Gebruik CSS om stapelingscontexten te beheren en zorg ervoor dat de inhoud van je portal correct wordt weergegeven.
• Problemen met Event Handling: Begrijp hoe events door de portal propageren en handel ze op de juiste manier af. Gebruik e.stopPropagation() om te voorkomen dat events onbedoelde acties activeren.
• Geheugenlekken: Ruim event listeners en referenties correct op wanneer de component die createPortal gebruikt, unmount om geheugenlekken te voorkomen. Gebruik de useEffect-hook met een cleanup-functie om dit te bereiken.
• Onverwachte Scrollproblemen: Portals kunnen soms het verwachte scrollgedrag van de pagina verstoren. Zorg ervoor dat je stijlen het scrollen niet verhinderen en dat modal-elementen geen paginasprongen of onverwacht scrollgedrag veroorzaken wanneer ze openen en sluiten.

Conclusie

React.createPortal is een waardevol hulpmiddel voor het creëren van flexibele, toegankelijke en onderhoudbare UI's in React. Door het doel, het gebruik en de geavanceerde technieken voor het afhandelen van events en toegankelijkheid te begrijpen, kun je de kracht ervan benutten om complexe en boeiende webapplicaties te bouwen die een superieure gebruikerservaring bieden aan een wereldwijd publiek. Vergeet niet om rekening te houden met best practices voor internationalisering en toegankelijkheid om ervoor te zorgen dat je applicaties inclusief en bruikbaar zijn voor iedereen.

Door de richtlijnen en voorbeelden in deze gids te volgen, kun je met vertrouwen createPortal gebruiken om veelvoorkomende UI-uitdagingen op te lossen en verbluffende webervaringen te creëren.